<template>
	<view class="coupon-box">


		<view class="share-wx" v-if="shareWXShow">
			<img @click="closeShareWX" class="share-wx-close" src="https://file.casugn.com/storecompcard//tI3aJkYKBbJ086237cd202028819e61d474819bc823e_1660276776127.png" alt="">
			<!--  v-if="!friendSelectShow" -->
			<view class="share-img">
				<img :src="goodsImage" alt="">
			</view>
			<view class="share-send">

				<button openType="share" class="shareBtn">

					<view class="">
						<img src="https://file.casugn.com/storecompcard//QSDskyI2jhEt33e5e495cefaf2ee85a8415d3a047ff6_1658829757449.png"
							alt="">
					</view>
					<view class="">
						分享到微信
					</view>

				</button>
				<!-- <u-button color="#fe3030"  text="发送" @click="sendText"></u-button> -->
			</view>
		</view>

		<!-- 同步优惠券 -->
		<!-- 	<view class="">
			<u-button type="primary" text="同步优惠券" @click="synClick"></u-button>
		</view> -->
		<view class="share-cicle" @click="shareClick" v-if="shareShow&&isMyself">
			<text>一键分享</text>
		</view>
		<view class="add-cicle" @click="synClick" v-if="shareDisabled&&isMyself">
			<text>领券</text>
		</view>
		<!-- 顶部tab切换 -->
		<view class="">
			<u-tabs :list="statusMenuLists" @click="statusMenuClick"></u-tabs>
		</view>
		<view class="created-box">
			<view class="created-btn">
				<u-button type="primary" color='linear-gradient(90deg, #4538ff 0%, #79a8ff 100%)'  text="生成券" @click="toCreateCoupon"></u-button>
			</view>

		</view>
		<!-- 优惠券列表 -->
		<view class="coupon-list">

			<view class="list-box" v-for="(item,index) in listInfo" :key="index"  @tap="checkCoupon(index,item)">
				<view class="coupon-pick">
					<u-icon name="checkmark-circle" color="#ff2819" size="50" v-if="item.bOn"></u-icon>
				</view>
				<view class="list-left-top">
					{{item.couponTypeValue}}
				</view>
				<view class="list-top">
					<view class="list-top-left">
						<view class="list-name">
							{{item.couponName}}
						</view>
						<view class="list-date">
							有效期至{{item.effectiveEnd}}
						</view>
					</view>
					<view class="list-top-right">
						<view class="list-money">
							¥ <text>{{item.publishValue}}</text>
						</view>
						<view class="list-condition">
							{{item.couponContent}}
						</view>
					</view>
				</view>
				<view class="list-btm">
					<view class="list-explain">
						<u-collapse @change="change" @close="close" @open="open">
							<u-collapse-item title="适用规则" name="Docs guide">
								<text class="u-collapse-content">{{item.description}}</text>
							</u-collapse-item>
						</u-collapse>
					</view>
					<view class="list-share">
						<view class="list-to-share">
							<u-button type="primary" size="mini" color="linear-gradient(90deg, #ff9c11 0%, #ff2819 100%)"
							text="去分享" @tap.stop="toShare(item,index)" v-if="shareDisabled"></u-button>
						</view>
						<view class="list-to-use">
							<u-button type="primary" class="" size="mini" color="linear-gradient(90deg, #ff9c11 0%, #ff2819 100%)"
							text="去使用" @tap.stop="toUseMethod(item,index)" v-if="shareDisabled"></u-button>
						</view>


					</view>
				</view>

			</view>
		</view>


		<u-popup :show="popShow" mode="center" class="pop-show">
			<view class="pop-box">
				<u--form labelPosition="left" :model="userInfos" labelWidth="100" :rules="rules" ref="form1">
					<u-form-item label="账号" prop="name" borderBottom required class='formItemWp'>
						<u--input v-model="userInfos.name" clearable border="none" placeholder='请输入账号'></u--input>
					</u-form-item>
					<u-form-item label="密码" prop="password" borderBottom required class='formItemWp'>
						<u--input v-model="userInfos.password" type='password' clearable border="none"
							placeholder='请输入密码'></u--input>
					</u-form-item>
				</u--form>
				<view class="pop-submit">
					<view class="pop-confirm">
						<u-button @click="synSubmit" type="primary">确认</u-button>
					</view>
					<view class="pop-cancle">
						<u-button @click="popShow=false" type="error">取消</u-button>
					</view>


				</view>
			</view>
		</u-popup>

		<u-popup :show="shareBottom" mode="bottom" @close="shareClose">
			<u-scroll-list v-if="friendListShow">
				<view v-for="(item, index) in friendList" class="friend-box" :key="index" @click="friendShareClick(item,index)">
					<img v-if="friendActiveIndex==index" class="friend-select" src="https://file.casugn.com/storecompcard//6VR4vvr9QWxV7aff1130782a2d1c2041b500f74dedc6_1660206503764.png" alt="">
					<view class="friend-head-box">
						<view class="friend-head-mask" v-if="friendActiveIndex==index"></view>
						<img :src="item.chatHead" class="friend-head"></img>
					</view>
					<view class="firend-name">
						{{item.name}}
					</view>
				</view>
			</u-scroll-list>
			<view class="share-bottom">

				<view class="share-send" v-if="!friendSelectShow">
					<u-button color="#fe3030"  text="发送" @click="sendText"></u-button>
				</view>
				<view class="share-bottom-box" @click="shareToFriend" v-if="friendSelectShow">
					<view class="share-bottom-wrap" >
						<view class="share-bottom-img-box share-bottom-img-box1">
							<img src="https://file.casugn.com/storecompcard//40JbY2nn1Yee0003816de3c71e1e6473f8b7d01b0ccf_1658829712018.png"
								alt="">
						</view>
						<view class="share-bottom-text">
							好友
						</view>
					</view>
				</view>
				<view class="share-bottom-box" v-if="friendSelectShow">
					<view class="share-bottom-wrap" @click="shareToCard">
						<view class="share-bottom-img-box share-bottom-img-box2">
							<img src="https://file.casugn.com/storecompcard//vs96iavFqbma23f173f64506cae24eeb49de67bbdc3b_1658829742783.png"
								alt="">
						</view>
						<view class="share-bottom-text">
							卡片
						</view>
					</view>
				</view>
				<!-- <view class="share-bottom-box" v-if="friendSelectShow">
					<view class="share-bottom-wrap">


						<view class="share-bottom-text">

							<button openType="share" class="shareBtn">
								<view class="share-bottom-img-box share-bottom-img-box3">
									<img src="https://file.casugn.com/storecompcard//QSDskyI2jhEt33e5e495cefaf2ee85a8415d3a047ff6_1658829757449.png"
										alt="">
								</view>
								<view class="">
									微信
								</view>
							</button>
						</view>

					</view>
				</view> -->
			</view>
		</u-popup>
		<!-- v-if="shareWXShow" -->





	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			...mapState(['userInfo', 'otherUserInfo', 'isSelf']),
		},
		data() {
			return {
				friendListShow:false,
				friendList: [
					// {
     //                thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
     //            }, {
     //                thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
     //            }, {
     //                thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
     //            }, {
     //                thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
     //            },{
     //                thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
     //            }, {
     //                thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
     //            }, {
     //                thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
     //            }, {
     //                thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
     //            }, {
     //                thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
     //            }, {
     //                thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
     //            },  {
     //                thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
     //            },
				],
				friendActiveIndex:'-1',
				friendSelectShow:true,
				friendSelectInfo:{},
				shareWXShow:false,//分享到微信显示隐藏
				shareWx:{
					width:"200upx"
				},
				userInfos: {
					name: '',
					password: '',
				},

				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur', 'change']
					},
					password: {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
				},
				unionId: '',
				openId: '',
				statusMenuLists: [{
					name: '未使用',
					id: 1,
				}, {
					name: '已使用',
					id: 2,
				}, {
					name: '已失效',
					id: 3,
				}, ],
				typeValue: '1',
				listInfo: [],
				popShow: false,
				selectAllCouponCode:[],
				shareShow:false,
				shareBottom:false,
				shareDisabled:true,
				shareStatus:false,
				toUse:false,//去使用
				isMyself:false,
				shareJson:{
					showInfo:{},//展示的信息
					jumpInfo:{},//跳转优品会携带的信息
				},//分享优惠券的信息
				goodIdsArr:[],//分享商品到微信得goodIds
				goodsImage:'',//分享得图片
				endUnionId:'',
				storeId:''
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		onLoad(options){
			wx.hideShareMenu()
		},
		onShow(options) {
			this.isMyself = this.$store.state.isSelf
			if (this.isMyself) {
				this.toUse = false
			} else {
				this.toUse = true
			}
			let openId = uni.getStorageSync('openId')
			console.log("这是openId", openId)
			this.unionId = openId.unionid
			this.openId = openId.openid



			console.log("分享状态", uni.getStorageSync('sceneStatus'));
			let status = uni.getStorageSync('sceneStatus')
			// if(status==)
			// let $this = this
			// //判断是否由分享进入
			if (status == 1007 || status == 1008 || status == 1044 || status == 1047) {
				this.shareDisabled = false
				this.shareStatus = false
			} else {
				this.shareDisabled = true
				this.shareStatus = true
			}
			this.getCouponLists()
			this.listInfo.map(function(value) {
				value.bOn = false
			})

		},
		methods: {
			// 去创建优惠券
			toCreateCoupon(){
				uni.navigateTo({
					url: '/pagesBusiness/createCoupon/createCoupon'
				})
			},
			// 分享优惠券点击
			shareClick() {
				this.shareBottom = true
			},
			// 分享到好友
			shareToFriend(){
				this.friendListShow=true
				this.querySingleChatList()
			},
			// 选取指定好友分享点击事件
			friendShareClick(item,index){
				console.log('分享到好友')
				console.log(item,index)
				this.endUnionId=item.unionId

				this.friendSelectInfo=item
				 this.friendActiveIndex=this.friendActiveIndex==index?-1:index
				 if(this.friendActiveIndex==-1){
					 // 判断是否选中，false是未选中，true是选中
					 this.friendSelectShow=true
				 }else{
					 this.friendSelectShow=false
				 }
			},

			//查询单聊列表
			async querySingleChatList() {

				let payload = {
					pageNo: 1,
					pageSize: 100,
					openId: this.openId,
					type:1
				}
				let res = await this.$api.queryRobCouponVoucher(payload)
				if (res.success) {
					// item.roomIcon =[]
					console.log("测试测试",res.result.records)
					if(res.result.records.length>0){
						this.friendList = res.result.records
						// .map(item => {
						// 	if(item.frendHead){
						// 		item.roomIcon = JSON.parse(item.frendHead)
						// 	}else{
						// 		item.roomIcon =["https://file.casugn.com/storecompcard//IncVZiU5gYsE01703be286353546682413b217acc8be_1660102753385.png"]
						// 	}
						// 	return item
						// })
					}else{

					}
					console.log(this.singleChatList, '查询单聊列表');
				} else {
					this.singleChatList = []
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			},
			// 确认发送 优惠券到聊天
			async sendText() {
				// this.hideDrawer(); //隐藏抽屉
				// if (!this.textMsg) {
				// 	return;
				// }
				// var nowDate = new Date();
				let userAvatar=uni.getStorageSync('_userInfo')
				this.shareJson.showInfo={
					imgUrl:this.goodsImage,
					fromName:userAvatar.name,
				}
				this.shareJson.jumpInfo={
					jumpImg:this.goodsImage,
					goodsIds:this.goodIdsArr.toString(),
					storeId:this.storeId,
				}
				console.log("传递得消息")
				console.log(this.shareJson)
				let payload = {
					roomId: this.friendSelectInfo.id,
					openId: this.openId,
					headUrl: this.chatHead,
					//修改nickname后使用nickname否则使用原有
					nickname: userAvatar.name,
					format: 4,
					content:JSON.stringify(this.shareJson),
				}

				let data = {
					couponCodes: this.selectAllCouponCode.toString(),
					fromUnionId: this.unionId,
					endUnionId: this.endUnionId
				}
				this.$api.shareCoupon(data.couponCodes, data.fromUnionId, data.endUnionId).then(res => {
					console.log(res)
					if (res.success) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});

						this.$api.sendMessage(payload).then(res=>{
							if (res.success) {
								uni.showToast({
									title: "分享成功",
									icon: 'none'
								});
								this.shareBottom = false
								this.friendSelectInfo={}
								this.friendList=[]
								this.friendSelectShow=true
								this.friendListShow=false
								this.friendActiveIndex='-1'
								this.shareWXShow=true
								this.getCouponLists()

							} else {
								uni.showToast({
									title: "分享失败",
									icon: 'none'
								});
							}
						})

					}
				})




			},

			// 分享到微信窗口关闭
			closeShareWX(){
				 this.shareWXShow=false
			},


			// 分享优惠券到卡片
			shareToCard() {
				let a = this.selectAllCouponCode.toString()
				console.log(a)
				let data = {
					couponCodes: a,
					fromUnionId: this.unionId
				}
				uni.setStorageSync('couponUserListsInfo', JSON.stringify(data))
				uni.navigateTo({
					url: '/pagesBusiness/coupon/couponUserList'
				})
			},
			// 分享优惠券到微信
			onShareAppMessage(res) {
				console.log("分享优惠券")
				// console.log(this.userInfo)
				console.log(res)
				let userAvatar=uni.getStorageSync('_userInfo')
				let ids = this.goodIdsArr.toString()
				console.log("微信分享的id")
				console.log(ids)

				if (res.from === 'button') { // 来自页面内分享按钮
					console.log('来自页面内分享按钮');
					// if (!this.userInfo.id) {
					// 	uni.showToast({
					// 		title: '请先创建名片',
					// 		icon: 'none'
					// 	});
					// 	return
					// }
					// + "&fromUnionId=" + this.unionId,
					if(ids){
						return {
							title: userAvatar.name+`分享给你了商品优惠券！点击查看吧！`,
							path: '/pagesBusiness/goodsList/goodsList?goodIds=' + ids,
							imageUrl:this.goodsImage,
							success(res) { // 分享成功回调
								console.log(" 分享成功回调", res)
								this.$uniApi.showTips('分享成功', 'success')
							}
						}
					}else{
						return {
							title: userAvatar.name+`分享给你了商品优惠券！点击查看吧！`,
							path: '/pagesBusiness/goodsList/goodsList?storeId=' + this.storeId,
							imageUrl:this.goodsImage,
							success(res) { // 分享成功回调
								console.log(" 分享成功回调", res)
								this.$uniApi.showTips('分享成功', 'success')
							}
						}
					}

				} else {
					// if (!this.userInfo.id) {
					// 	uni.showToast({
					// 		title: '请先创建名片',
					// 		icon: 'none'
					// 	});
					// 	return
					// }
					// return {
					// 	title: `我是${this.userInfo.company?this.userInfo.company:''}的${this.userInfo.name?this.userInfo.name:''},这是我的拜帖,敬请惠存!`,
					// 	path: '/pages/card/card?cardId=' + this.userInfo.id
					// }
				}

			},
			// 同步优惠券
			synClick() {
				this.popShow = true
			},
			// 同步优惠券提交
			synSubmit() {
				let data = {
					username: this.userInfos.name,
					password: this.userInfos.password,
					fromUnionId: this.unionId,
				}
				this.$api.synMyCoupon(this.userInfos.name, this.userInfos.password, this.unionId).then(res => {
					console.log(res)
					if (res.success) {
						uni.showToast({
							title: res.result,
							icon: 'none'
						});
						this.popShow = false
						this.getCouponLists()
					} else {
						this.popShow = true
						this.userInfos.name = ''
						this.userInfos.password = ''
						uni.showToast({
							title: "信息输入错误，请重新输入！",
							icon: 'none'
						});
					}
				})
			},

			// 状态切换点击
			statusMenuClick(item) {
				console.log(item)
				this.typeValue = item.id
				if (this.shareStatus) {
					if (this.typeValue == 1) {
						// 如果是未使用
						this.shareDisabled = true
						this.shareShow = false
					} else {
						// 已使用和已过期都不能分享
						this.shareDisabled = false
						this.shareShow = false
					}
					this.getCouponLists()
				} else {
					this.shareDisabled = false
					this.shareShow = false
					this.getCouponLists()
				}

			},
			getCouponLists() {
				let data = {
					useState: this.typeValue,
					unionId: this.unionId
				}
				if (this.typeValue == 1) {
					// 如果是未使用
					this.shareDisabled = true
					this.shareShow = false
				} else {
					// 已使用和已过期都不能分享
					this.shareDisabled = false
					this.shareShow = false
				}
				this.$api.getCouponList(data).then(res => {
					console.log(res)
					if (res.success) {
						this.listInfo =[]
						this.listInfo = res.result.records
					}
				})
			},
			toShare(item, index) {
				console.log(item)
				this.storeId=item.storeId
				this.shareBottom = true
				this.shareShow = false
				this.selectAllCouponCode = []
				this.goodIdsArr=[]
				let data = {
					couponCodes: item.couponCode,
					fromUnionId: this.unionId
				}
				this.selectAllCouponCode.push(item.couponCode)
				// useType -- 1 是店铺券，--2 是商品券
				if(item.useType==2){
					this.goodIdsArr.push(item.goodsIds)
				}else{
					// 如果是店铺券，id为店铺id
					this.goodIdsArr=[]
					// this.goodIdsArr.push(item.storeId)
				}

				this.goodsImage=item.goodsImage
				uni.setStorageSync('couponUserListsInfo', JSON.stringify(data))

			},
			// 去使用
			toUseMethod(item, index) {
				console.log("去使用")
				console.log(item,index)
				if(item.goodsIds){
					uni.navigateTo({
						url: '/pagesBusiness/goodsList/goodsList?goodIds=' + item.goodsIds
					})
				}else{
					uni.navigateTo({
						url: '/pagesBusiness/goodsList/goodsList?storeId=' + item.storeId
					})
				}

				// /pagesBusiness/goodsList/goodsList?goodIds=' + item.goodsIds,
			},

			// 单选多选
			checkCoupon(index, item) {
				if (this.shareStatus) {
					if (this.typeValue == 1) {
						// 如果是未使用
						const temp = this.listInfo[index]
						temp.bOn = !this.listInfo[index].bOn
						this.$set(this.listInfo, index, temp)
						console.log(this.listInfo)
						this.selectAllCouponCode = []
						this.goodIdsArr=[]
						this.listInfo.forEach(item => {
							if (item.bOn) {
								this.selectAllCouponCode.push(item.couponCode)
								// this.goodIdsArr.push(item.goodsIds)
								// useType -- 1 是店铺券，--2 是商品券
								if(item.useType==2){
									this.goodIdsArr.push(item.goodsIds)
								}else{
									// 如果是店铺券，id为店铺id
									this.goodIdsArr.push(item.storeId)
								}
							}
						})
						console.log(this.selectAllCouponCode)
						if (this.selectAllCouponCode.length == 0) {
							this.shareShow = false
						} else {
							this.shareShow = true
						}
					} else {
						// 已使用和已过期都不能分享
						this.shareShow = false
						this.toUse = false


					}
				} else {
					console.log("分享页进入 禁止分享")
				}


			},

			open(e) {
				// console.log('open', e)
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				// console.log('change', e)
			},
			shareClose() {
				this.shareBottom = false
				this.friendSelectInfo={}
				this.friendList=[]
				this.friendSelectShow=true
				this.friendListShow=false
				this.friendActiveIndex='-1'
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-box {
		background-color: #F8F9FF;
		padding: 0 30upx 20upx;
		position: relative;

		.share-cicle {
			position: fixed;
			width: 120upx;
			height: 120upx;
			line-height: 120upx;
			text-align: center;
			background: linear-gradient(90deg, #ff9c11 0%, #ff2819 100%);
			// box-shadow: 0upx 3upx 20upx 0upx rgba(65, 59, 243, 0.5000);
			border-radius: 50%;
			right: 30upx;
			bottom: 300upx;
			z-index: 10;
			letter-spacing: 5upx;
			color: white;
			font-weight: bold;
			font-size: 24upx;
		}

		.add-cicle {
			position: fixed;
			width: 120upx;
			height: 120upx;
			line-height: 120upx;
			text-align: center;
			background: linear-gradient(90deg, #4538ff 0%, #79a8ff 100%);
			// box-shadow: 0upx 3upx 20upx 0upx rgba(65, 59, 243, 0.5000);
			border-radius: 50%;
			right: 30upx;
			bottom: 150upx;
			z-index: 10;
			letter-spacing: 5upx;
			color: white;
			font-weight: bold;

			text {
				// width: 50upx;
				// height: 50upx;
				// position: absolute;
				// top: 50%;
				// left: 50%;
				// transform: translateX(-25upx) translateY(-25upx);
			}
		}

		// 生成券
		.created-box{
			display: flex;
			justify-content: flex-end;
		}

		// 优惠券列表
		.coupon-list {

			// .coupon-active{
			// 	color: red;
			// }
			// 单个优惠券box
			.list-box {
				// display: flex;
				position: relative;
				// width: 700upx;
				// height: 300upx;
				border-radius: 20upx;
				background: #FFFFFF;
				box-shadow: 5px 5px 3px #888888;
				border: 1px solid rgba(0, 0, 0, 0.1);
				margin: 40upx auto;

				.coupon-pick {
					position: absolute;
					top: 10upx;
					right: 15upx;
				}
			}

			// 优惠券左上角显示的背景图
			.list-left-top {
				position: absolute;
				top: 10upx;
				left: -15upx;
				width: 180upx;
				height: 50upx;
				text-align: center;
				line-height: 50upx;
				font-size: 24upx;
				color: white;
				letter-spacing: 5upx;
				background: linear-gradient(90deg, #ff9c11 0%, #ff2819 100%);
				transform: rotateZ(-30deg);
			}

			// 优惠券顶部
			.list-top {
				// background: forestgreen;
				width: 80%;
				margin: 0 auto;
				height: 100upx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
				margin-top: 100upx;

				.list-top-left {
					.list-name {
						font-size: 32upx;
						font-weight: bold;
					}

					.list-date {
						font-size: 26upx;
						font-weight: 400;
						color: #5b5b5b;
						margin-top: 10upx;
					}
				}

				.list-top-right {
					text-align: center;
					position: relative;
					top: -38upx;

					.list-money {
						font-size: 32upx;
						font-weight: bold;
						position: relative;
						top: 10upx;
						color: #ff2819;

						text {
							font-size: 60upx;
							vertical-align: end;
							padding-left: 10upx;
						}
					}

					.list-condition {
						font-size: 26upx;
						font-weight: 400;
						color: #5b5b5b;
						margin-top: 10upx;
					}
				}
			}

			// 优惠券底部
			.list-btm {
				display: flex;
				justify-content: space-between;
				width: 80%;
				margin: 0 auto;
				padding: 20upx 0;

				.list-explain {

					// width: 300upx;
					::v-deep .u-cell {
						width: 205upx;
					}

					::v-deep .u-cell__title-text {
						font-size: 26upx;
						font-weight: 400;
						color: #5b5b5b;
					}

					::v-deep .u-line {
						border-bottom-width: 0 !important;
						border-bottom-style: none !important;
					}

					::v-deep .u-cell__body {
						padding: 0 !important;
					}

					::v-deep .u-cell__body__content {
						flex: none !important;
					}

					::v-deep .u-collapse-item__content__text {
						padding: 20upx 20upx 20upx 0 !important;
						font-size: 24upx;

					}
				}

				.list-share {
					width: 250upx;
					// background: yellow;
					display: flex;
					justify-content: space-around;
					.list-to-share{
						width: 100upx;
					}
					.list-to-use{
						margin-left: 10upx;
						width: 100upx;
					}
				}
			}
		}

		// 弹出框
		.pop-box {
			padding: 50upx;

			.pop-submit {
				display: flex;
				justify-content: space-around;
				margin-top: 20upx;

				.pop-confirm {
					width: 200upx;
				}

				.pop-cancle {
					width: 200upx;
					margin-left: 20upx;
				}
			}
		}
		.friend-box{
			margin-top: 20upx;
			text-align:center;
			margin-left: 20upx;
			position: relative;

			.friend-select{
				position: absolute;
				right: 10upx;
				bottom: 30upx;
				width: 40upx;
				height: 40upx;
				z-index: 20;
			}
			.friend-head-box{
				margin:0 auto ;
				position: relative;
				width: 80upx;
				height: 80upx;
				// background: red;
				.friend-head-mask{
					position: absolute;
					top: 0;
					left: 0;
					width: 80upx;
					height: 80upx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 50%;
					z-index: 10;
				}
				.friend-head{
					width: 80upx;
					height: 80upx;
					// margin-left: 20upx;
					border-radius: 50%;
				}
			}

			.firend-name{
				font-size: 20upx;
				text-align: center;
				// background: red;
				width: 100upx;
				-webkit-box-orient: vertical;
				display: -webkit-box;
				overflow-wrap: break-word;  //强制换行
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp:2; //超出多少行数显示省略号
			}
		}

		// 分享弹出框
		.share-bottom {
			padding: 50upx;
			display: flex;
			justify-content: space-around;

			.share-send{
				width: 400upx;
				background: yellowgreen;
			}
			.share-bottom-box{
				.share-bottom-wrap{
					// background: red;
					text-align: center;

					.share-bottom-img-box {
						background: red;
						width: 80upx;
						height: 80upx;
						text-align: center;
						border-radius: 50%;
						position: relative;

						// background: red;
						img {
							width: 50upx;
							height: 50upx;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translateX(-25upx) translateY(-25upx);
						}
					}

					.share-bottom-text {
						font-size: 26upx;
						// margin-top: 10upx;
						font-weight: 600;
						line-height: 50upx;
						font-size: #5d5d5d;

						.shareBtn {
							padding: 0;
							font-size: 26upx;
							font-weight: 600;
							font-size: #5d5d5d;
							line-height: 50upx;
							border-radius: 0;
							background: white;
						}

						.shareBtn::after {
							border: none !important;
						}
					}

					.share-bottom-img-box1 {
						background: #fe3030;
					}

					.share-bottom-img-box2 {
						background: #1574ef;
					}

					.share-bottom-img-box3 {
						background: rgb(0, 211, 162);
					}

				}
			}
		}

		// 分享到微信
		.share-wx{
			position: fixed;
			background: white;
			box-shadow: 0px 0px 9px 1px rgba(92, 87, 254, 0.2);
			top:50%;
			left: 50%;
			z-index: 20;
			transform: translateX(-230upx) translateY(-150upx);
			border-radius: 50upx;
			width: 400upx;
			height: 300upx;
			padding: 50upx;
			.share-wx-close{
				width: 50upx;
				height: 50upx;
				position: absolute;
				top: 30upx;
				right: 30upx;
			}
			.share-img{
				width: 200upx;
				height: 200upx;
				// background: #1574ef;
				border-radius: 20upx;
				margin: 0 auto;
				margin-top: 30upx;
				img{
					width: 200upx;
					height: 200upx;
				}
			}
			.share-send{
				width: 250upx;
				margin: 0 auto;
				// background: yellowgreen;
				margin-top: 20upx;
				.shareBtn {
					display: flex;
					justify-content: space-around;
					padding: 0;
					font-size: 26upx;
					font-weight: 600;
					// font-size: #5d5d5d;
					color: white;
					line-height: 80upx;
					border-radius: 0;
					background: rgb(7,193,96);
					border-radius: 5upx;
					height: 80upx;
					img{
						width: 60upx;
						height: 60upx;
						position: relative;
						top: 10upx;
					}
				}

				.shareBtn::after {
					border: none !important;
				}
			}
			// display: flex;
			// justify-content: space-around;
		}

	}
</style>
